.slds-text-title_caps.slds-m-bottom_x-small Basic Icons
.slds-grid.slds-grid_pull-padded.slds-grid_vertical-align-center
  ngl-icon(iconName="doctype:audio", alternativeText="Audio file")
  ngl-icon(iconName="standard:event", alternativeText="Event")
  ngl-icon(iconName="utility:connected_apps", alternativeText="Connected")
  ngl-icon(iconName="utility:warning", alternativeText="Warning!", variant="warning")
  ngl-icon(iconName="utility:error", alternativeText="Error!", variant="error")
  ngl-icon(iconName="utility:image", alternativeText="Utility image")
  ngl-icon(iconName="doctype:image", alternativeText="Doc image")
  ngl-icon(iconName="action:call", size="small" alternativeText="Click to Call")

.slds-text-title_caps.slds-m-bottom_x-small.slds-m-top_large Color variants
.slds-grid.slds-grid_pull-padded.slds-grid_vertical-align-center
  ngl-icon(iconName="utility:lock", variant="default")
  ngl-icon(iconName="utility:lock", variant="light")
  ngl-icon(iconName="utility:lock", variant="error")
  ngl-icon(iconName="utility:lock", variant="warning")

.slds-text-title_caps.slds-m-bottom_x-small.slds-m-top_large Sizes
.slds-grid.slds-grid_pull-padded.slds-grid_vertical-align-center
  ngl-icon(iconName="utility:lock", size="xx-small")
  ngl-icon(iconName="utility:lock", size="x-small")
  ngl-icon(iconName="utility:lock", size="small")
  ngl-icon(iconName="utility:lock")
  ngl-icon(iconName="utility:lock", size="large")

.slds-text-title_caps.slds-m-bottom_x-small.slds-m-top_large Inverse
.slds-grid.slds-grid_pull-padded.slds-grid_vertical-align-center(style="background-color: #16325c; padding: 12px;")
  ngl-icon(iconName="utility:lock", variant="inverse")
